{% extends "layout.html" %}

{% block css_m %}
    {% load myfilter %}
    <link type="text/css" rel="stylesheet"
          href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap-datetimepicker.min.css">
    <style>

    </style>
{% endblock %}
{% block js_m %}
    <script type="text/javascript"
            src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
{% endblock %}

{% block content_body %}
    <div class="container center-block" style="width: 1000px">
        <h1>查看订单</h1>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">订单：{{ result.order_id }}<small style="margin-left:10px;">({{ result.get_bill_status_display }})</small></h3>
            </div>


                <table class="table table-bordered table-hover ">
                    <thead>
                    <tr>
                        <th>产品名称</th>
                        <th style="text-align: center">数量</th>
                    </tr>
                    <thead>
                    <tbody>
                    {% for each in bill_obj %}
                        <tr>
                            <td><h3>
                                <img class="img-rounded" src="{{ each.item_id.item_image }}" alt="{{ each.item_id.item_name }}"
                                     style="width:50px;height:50px">
                                <span>{{ each.item_id.item_name }}</span>
                                </h3>
                            </td>
                            <td style="text-align: center">{{ each.order_quantity }}
                            </td>

                        </tr>
                    {% endfor %}
                    </tbody>


                </table>


        </div>
        <div class="panel panel-default">
            <ul class="list-group">
                <li class="list-group-item"><strong>订单金额：</strong>{{ result.total_amount }}元</li>
                
                <li class="list-group-item"><strong>购买日期：</strong>{{ result.buying_date }}</li>

                <li class="list-group-item"><strong>客户id：</strong>{{ result.pid }}</li>
                <li class="list-group-item"><strong>经办人：</strong>{{ result.operator }}</li>
                
            </ul>
            <div class="panel-footer">
            <a class="btn btn-primary" href="/customer/{{ pid }}/details.html/">返 回</a>
        </div>
        </div>
        

    </div>





{% endblock %}

{% block content_bottom %}
    <script>
        $(function () {
           
            $("tbody tr td").css("vertical-align", "middle");
            $("tbody tr td").css("padding-left", "15px");
            $("thead tr th").css("padding-left", "15px");

            $('#id_buying_date').datetimepicker({


                format: 'yyyy-mm-dd hh:ii',
                language: 'zh-CN',
                autoclose: true,
                todayBtn: "linked",
                todayHighlight: true
            });
            $(".test_content").on("click", function () {

                if ($('#id_buying_items').val()) {
                    $('#id_buying_items').val($('#id_buying_items').val() + " " + $(this).text())
                } else {
                    $('#id_buying_items').val($('#id_buying_items').val() + $(this).text())
                }

                $("#id_total_amount").val(Number($("#id_total_amount").val()) + Number($(this).attr("id")))
                $("#id_bill_amount_bf_dst").val(Number($("#id_bill_amount_bf_dst").val()) + Number($(this).attr("about")))

            });
            $("#test_clean").on("click", function () {

                $('#id_buying_items').val("");
                $('#id_total_amount').val("");
                $('#id_bill_amount_bf_dst').val("");

            });

        })
    </script>
{% endblock %}